<template>
<div>
    <div id="toparea">
        <SearchTop :title ='title'></SearchTop>        
    </div>
    <template v-for='(item) in AddressList' >
        <div id="addritem" :key='item.tel'>
            <div id="addrtxt">
                <div>
                    <span>
                        {{ item.county }}
                    </span>
                    <span id="roomNum">
                        {{ item.addressDetail }}
                    </span>
                </div>
                <div>
                    <span>{{ item.name }}</span>
                    <span>{{ item.tel }}</span>
                </div>
            </div>
            <a href="" id="changeadd" ></a>
        </div>
    </template>
    <div v-for='(item,index) in 3' :key='index'>
        <div id="addritem" >
            <div id="addrtxt">
                <div>
                    <span>
                        北京科技职业学院
                    </span>
                    <span id="roomNum">
                        科创楼4楼20
                    </span>
                </div>
                <div>
                    <span>姓名姓名</span>
                    <span>12345679898</span>
                </div>
            </div>
            <a href="" id="changeadd"></a>
        </div>
    </div>

    <router-link to="/add" id="add-addr">
            <i></i>
            新增收货地址
    </router-link>

</div>
</template>

<script>
import SearchTop from '../../components/search/SearchTop'
import { mapState } from 'vuex'
import { AddressList } from 'vant'
export default {
    data () {
        return {
            title:'收货地址列表',
            AddressList:[]
        }
    },
    computed:{
        ...mapState('addlist',['addresslist'])
    },
    components:{
        SearchTop
    },
    mounted () {
        if(localStorage.getItem('addrlist')){
            console.log(1111)
            this.AddressList = JSON.parse( localStorage.getItem('addrlist'))
            console.log( this.AddressList )
        }else{
            this.AddressList = []
        }

    }
}
</script>

<style lang='scss' scoped>
#toparea{
    border-bottom: 1px solid rgb(204, 204, 204);
}
#addritem{
    height: 65.5px;
    margin: 0 0 0 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #E4E4E4;
    transition: transform .2s;
    #addrtxt{
        width: 90%;        
        div:nth-of-type(1){
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 22.5px;
            width: 90%;
            span:nth-of-type(1){
                margin-right: 10px;
            }
            #roomNum{
                width:auto;
                overflow: auto;
            };
        }
        div:nth-of-type(2){
            font-size: 14px;
            line-height: 20px;
            margin-top: 3px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            span:nth-of-type(1){
                margin-right: 10px;
            }
        }
    }        
    a{
        width: 55px;
        height: 100%;
        background: url() no-repeat 0 50%;
        background-size: 15px 15px;
        background-position-x: 20px;
        position: absolute;
        right: 0;
    }
}
#add-addr{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    display: flex;
    font-size:16px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #d7d7d7;
    background: #fff;
    z-index: 1000;
    i{
        background: url() no-repeat;
        width: 15px;
        height: 15px;
        background-size: 100%;
        margin-right: 5px;
    }
}

</style>